const path = require('path');
//启用热更新的第二步
const webpack=require('webpack');
//导入在内存中生成HTML页面的插件
//只要是插件，都一定要放到plugins节点中去
//这个插件的两个作用：
//1.自动在内存中根据指定页面生成一个内存的页面
//2.自动把打包好的bundle.js追加到页面中去
const htmlWebpackPlugin = require('html-webpack-plugin');
//导入删除文件夹的插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
//通过Node模块操作，向外面暴露一个配置对象
module.exports={
    entry:
        path.join(__dirname,'./src/main.js'),//打包文件
       // vendors:['jquery']//这是第三方包名称
    
    
    
    output:{
        path:path.join(__dirname,'./dist'),//打包好的文件存放地址
        filename:'index.js'//打包好文件的文件名
    },
    mode:'development',//设置mode
    plugins:[//配置插件的节点
        new webpack.HotModuleReplacementPlugin(),//new一个热更新的模块对象，这是启用热更新的第三步
        new htmlWebpackPlugin({//创建一个在内存中生成HTML页面的插件
            template:path.join(__dirname,'./src/index.html'),//指定模板页面，将来会根据指定的页面路径，去生成内存中的页面
            filename:'index.html' //指定生成的页面的名称
        }),
        new CleanWebpackPlugin(),//指定删除dist文件夹中的文件
        /* new webpack.optimize.CommonsChunkPlugin({
            name:'vendors',
            filename:'vendors.js'//指定抽离出来的第三方包，文件名叫做什么
        }) */
        
    ],
       /* optimization:{
        splitChunks: {
            cacheGroups: {
            
                commons: {
                    name: "vendors",
                    chunks: "all",
                    minChunks: 2
                }
            }
        }
    },    */
    module:{//这个节点用于配置所有第三方模块加载器
        rules:[//所有第三方模块的匹配规则
            //配置处理.css文件的第三方loader规则
            { test:/\.css$/,use:['style-loader','css-loader'] },//正则表达式可以匹配所有以.css结尾的文件
            //这是配置处理.less文件的第三方loader规则
            { test:/\.less$/,use:['style-loader','css-loader','less-loader']},
            //这是配置处理.sass文件的第三方loader规则
            { test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
            //这是配置样式表中图片的loader规则
            { test:/\.jpg|png|gif|bmp$/,use:['url-loader?limit=100000&name=images/[hash:6]-[name].[ext]']},
            
            //可以使用？给url-loader传递参数，其中有一个固定的参数叫做limit，表示照片的大小，需要给定一个数值；
            //limit给定的这个数值是图片的大小，单位为Byte（字节）
            //如果指定limit参数，则只有图片的大小小于等于给定的值时候，才会转为base64格式的图片，否则就不转换
            //[name].[ext]是指定是什么文件的名字和后缀名，[hash:长度]表示取Hash值的前几位（总长度32）。
            { test:/\.js$/,use:'babel-loader',exclude:/node_modules/}
            //添加转换JS文件的loader，其中必须把node_modules目录设置为排除项，这样，在打包的时候，会忽略node_modules目录下所有
            //的JS文件，否则项目运行不起来

        ]

    }
}
 

//当我们在 控制台 直接输入webpack命令执行的时候，webpack做了以下几步
//1.首先webpack发现，我们并没有通过命令的形式，给它指定入口和出口
//2.webpack就会去项目的更目录中，查找一个叫webpack.config.js的配置文件
//3.当找到配置文件后，webpack会去解析执行这个配置文件，当解析执行完配置文件后，就得到了配置文件中，导出的配置对象
//4.当webpack拿到配置对象后，就拿到了配置对象中，指定的入口和出口，然后进行打包构建；
//所以直接在控制台上输入webpack就可以将要打包的文件配置成另一个打包好的文件